.back{ width: 30px; height: 30px; position: absolute; left: 0; top: 0; }
.back img{ width: 100%; height: 100%; }
.head{ width: 100%; height: 220px; position: relative; background: #fff; }
.pic{ position: absolute; left: 50%; margin-left: -50px; border-radius: 50%; overflow: hidden; margin-top: 50px;
    width: 100px; height: 100px; background: #fff; }
.pic img{ width: 100%; }
.user-line{ position: absolute; margin-top: 150px; width: 100%; text-align: center; }
.user-line p[class=name]{ font-size: 16px; margin-top: 10px; color: #666; }
.user-line p[class=mood]{ margin-top: 5px; font-size: 12px; color: #fff; padding: 5px 0; background: rgba(0, 0, 0, 0.50); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.user-line p i{ margin-right: 5px; font-weight: bold; }
.green{ color: #00ff00; }
.pink{ color: deeppink; }

.nav{ text-align: center; margin-top: 10px; width: 100%; background: #fff; display: flex; justify-content: center; }
.nav li{ background: #fff; width: 33.33%; }
.nav li .border{ width: 100%; height: 40px; line-height: 40px; }
.nav li .border a{ width: 100%; height: 100%; display: block; }

.info{ text-align: left; margin-top: 10px; }
.info li{ display: block; line-height: 40px; background: #fff; border-bottom: 1px solid #efefef; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding: 0 10px; }
.info li i{ width: 40px; text-align: center; }
.info li span{ display: inline-block; width: 40px; color: #999; }
